<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog
    v-model="props.addVisible"
    class="add_skin_library"
    :title="modalType === 'edit' ? '修改铺层' : '新增铺层'"
    @close="handleVisible('cancel')"
  >
    <el-form ref="formRef" size="small" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="铺层代码" prop="plyCode">
        <el-input v-model="formData.plyCode" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="材料" prop="material">
        <el-select v-model="formData.material" placeholder="请选择">
          <el-option v-for="item in materialData" :key="item.value" :value="item.value" :label="item.label"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单层厚度" prop="thickness">
        <el-input v-model="formData.thickness" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="是否对称铺层" prop="symmetrical">
        <el-radio-group v-model="formData.symmetrical">
          <el-radio value="1" size="small">是</el-radio>
          <el-radio value="0" size="small">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="层数" prop="layerNumber">
        <el-input v-model="formData.layerNumber" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="部段描述" prop="sectionDescription">
        <el-input v-model="formData.sectionDescription" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="零件描述" prop="partDescription">
        <el-input v-model="formData.partDescription" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input v-model="formData.remarks" placeholder="请输入" type="textarea" rows="2" resize="none" />
      </el-form-item>
      <el-form-item label="PLY1">
        <el-input v-model="formData.PLY1" placeholder="请输入" />
      </el-form-item>
      <el-form-item v-for="(item, index) in plys" :key="item.label" :label="item.label">
        <div class="ply_item">
          <el-input v-model="formData[item.label]" class="ply_input" placeholder="请输入" />
          <el-icon v-if="index === plys.length - 1" class="ply_icon" @click="removeItem(item)"><Remove /></el-icon>
        </div>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button style="width: 100%" type="primary" plain icon="Plus" @click="addPly">添加</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="handleVisible('cancel')">取消</el-button>
        <el-button size="small" type="primary" @click="submitAdd"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="addSkinLibrary" setup>
import { saveLayer, materialList } from '@/api/layupLibrary';

const props = defineProps(['addVisible', 'rowData']);
const emit = defineEmits(['handleEvent']);
const modalType = props?.rowData ? 'edit' : 'add';
const formRef = ref(null);
const formData = ref({
  plyCode: '',
  material: '',
  thickness: '',
  symmetrical: '',
  PLY1: ''
});
const plys = ref([]);
const materialData = ref([]);
if (modalType === 'edit') {
  formData.value = props.rowData;
  formData.value.symmetrical = props.rowData?.symmetrical?.toString();
  if (props.rowData?.data) {
    const dataArr = props.rowData?.data.split(',') || [];
    dataArr.shift();
    dataArr.forEach((el) => {
      const length = plys.value.length;
      plys.value.push({ label: `PLY${length + 2}`, value: el });
      formData.value[`PLY${length + 2}`] = el;
    });
  }
}

const rules = ref({
  plyCode: [{ required: true, message: '铺层代码不能为空', trigger: 'blur' }],
  material: [{ required: true, message: '材料不能为空', trigger: 'blur' }],
  thickness: [{ required: true, message: '单层厚度不能为空', trigger: 'blur' }],
  symmetrical: [{ required: true, message: '请选择是否对称铺层', trigger: 'blur' }]
});

// 新增ply
const addPly = () => {
  const length = plys.value.length;
  plys.value.push({ label: `PLY${length + 2}`, value: `PLY${length + 2}` });
};
// 删除ply
const removeItem = (data) => {
  // filter不具备响应式
  const resultArr = plys.value.filter((item) => item.label !== data.label);
  plys.value = resultArr;
};
const handleVisible = (type) => {
  if (type === 'cancel') {
    emit('handleEvent', { type: 'close' });
  } else {
    emit('handleEvent', { type: 'refresh' });
  }
};
const submitAdd = () => {
  formRef.value.validate((valid) => {
    if (!valid) {
      return false;
    }
    //处理数据
    let plyData = [];
    plys.value.forEach((el) => {
      plyData.push(formData.value[el.label]);
    });
    plyData.unshift(formData.value.PLY1);
    formData.value.data = plyData.toString();
    if (modalType === 'edit') {
      formData.value.materialId = props?.rowData?.isfdLayupEquivalentMaterialVo?.id;
    }
    saveLayer(formData.value).then((res) => {
      if (res) {
        if (modalType === 'add') {
          console.log('RES', res);
          ElMessage({ showClose: true, message: '新增成功。', type: 'success' });
        } else {
          ElMessage({ showClose: true, message: '修改成功。', type: 'success' });
        }
        handleVisible();
      }
    });
  });
};
onMounted(() => {
  materialList({ materialName: '', materialNumber: '', pageNum: 1, pageSize: 9999 }).then((res) => {
    if (res.code === 200) {
      console.log('MATERIAL', res);
      materialData.value = res.rows.map((item) => {
        return { label: item.materialName, value: item.materialNumber };
      });
      console.log('materialData.value', materialData.value);
    }
  });
});
</script>
<style lang="scss" scoped>
.add_skin_library {
  user-select: none;
  .ply_item {
    width: 100%;
    display: flex;
    align-items: center;
    .ply_icon {
      font-size: 16px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
